{% extends "layout.html" %}
{% block title %}New Battle{% endblock %}
{% block scripts %}
{{super()}}
<script type="text/javascript">
	CRITTER_JSON_URL = "{{url_for('editor_app.get_critters_json')}}";
	CRITTER_RANDOM_IDS_URL = "{{url_for('editor_app.get_random_critter_ids')}}";
	CRITTER_USER_IDS_URL = "{{url_for('editor_app.get_user_critter_ids')}}";
	NEW_BATTLE_URL = "{{url_for('battles_app.request_custom_battle')}}";
</script>
<script src="{{url_for('static', filename='js/new_battle.js')}}"></script>
{% if (critter_ids) %}
{% set critter_ids_list = critter_ids|map('string')|join(', ') %}
<script>
	console.log("Pre-selected Critters:", [{{critter_ids_list}}]);
	var preselected = [{{critter_ids_list}}];
	newBattleModule.loadCritters(preselected, function() {
		for (var i = 0; i < preselected.length; i++) {
			newBattleModule.selectCritter(preselected[i]);
		}
		newBattleModule.refreshDisplay();
	});
</script>
{% endif %}
{% endblock %}
{% block body %}
<h1>Custom Battle</h1>
<section>
	<div id="battlesettings">
		<h2>Settings</h2>
		Steps <input id="battlelength" type="number" value="500" min="1" min="1" max="5000" step="1" /><br />
		Size 
		<input id="battlewidth" type="number" value="100" min="30" max="300" step="1" /> x
		<input id="battleheight" type="number" value="100" min="30" max="300" step="1" /><br />
	</div>
	<div id="critterbox">
		<h2>Critters</h2>
		<div id="critterselection">
			<div id="tabbuttonbar">
				<a class="tabbutton" id="selectuser">My Critters</a>
				<!-- <a class="tabbutton" id="selectrecent">Recently Battled</a> -->
				<a class="tabbutton" id="selectrandom">Random</a>
				<div class="clear"></div>
			</div>
			<div class="tablebox">
				<div>
					<span class="crittername">Critter Name</span>
					<span class="critterowner">Owner</span>
					<span class="critterrank">Rank</span>
				</div>
				<ul>
					loading...
				</ul>
			</div>
		</div>
		<ul id="critterlist">
			<span>No critters selected</span>
		</ul>
	</div>
</section>
<a id="createbutton">Create</a>
{% endblock %}